<script setup lang="ts">
import { ref } from "vue";
import MarkEditor from "../components/MarkEditor.vue";
import CodeEditor from "../components/CodeEditor.vue";

// 接受文本编辑器子节点暴露的属性
const editorValue = ref("");
const handleChange = (v: string) => {
  console.log(v);
  editorValue.value = v;
};

// 接受代码编辑器子节点属性
const code = ref(`// 输入代码`);
const handleCodeEditorChange = (v: string) => {
  code.value = v;
};
const setValue = () => {
  code.value = `public class M{
  public static void main(String[] args){
    System.out.println("hello,world");
  }
}`;
};
const clearValue = () => {
  code.value = "";
};

</script>
<template>
  <MarkEditor :value="editorValue" :handleChange="handleChange"></MarkEditor>
  {{ code }}
  <el-button type="primary" @click="setValue">输入代码</el-button>
  <el-button type="warning" @click="clearValue">清空代码</el-button>
  <CodeEditor :value="code" :change="handleCodeEditorChange" :language="'java'" />
</template>
<style scoped></style>
